import React, { useState, useCallback } from 'react';
import { useLocalization } from '../hooks/useLocalization';
import { FacebookIcon, XIcon, RedditIcon, CopyLinkIcon } from './icons';

interface ShareButtonsProps {
  url: string;
  title: string;
}

const ShareButtons: React.FC<ShareButtonsProps> = ({ url, title }) => {
  const { t } = useLocalization();
  const [copyText, setCopyText] = useState(t('copy_link'));

  const socialPlatforms = [
    {
      name: 'Facebook',
      icon: <FacebookIcon />,
      url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
      tooltip: t('share_on_facebook'),
      color: 'hover:bg-blue-600 dark:hover:bg-blue-500'
    },
    {
      name: 'X',
      icon: <XIcon />,
      url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
      tooltip: t('share_on_x'),
      color: 'hover:bg-gray-800 dark:hover:bg-gray-200'
    },
    {
      name: 'Reddit',
      icon: <RedditIcon />,
      url: `https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`,
      tooltip: t('share_on_reddit'),
      color: 'hover:bg-orange-500 dark:hover:bg-orange-400'
    },
  ];

  const handleCopyLink = useCallback(() => {
    navigator.clipboard.writeText(url).then(() => {
      setCopyText(t('copied_link'));
      setTimeout(() => {
        setCopyText(t('copy_link'));
      }, 2000);
    });
  }, [url, t]);

  return (
    <div className="bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-lg">
      <h3 className="text-lg font-semibold text-center text-dark dark:text-white mb-4">
        {t('share_tool_title')}
      </h3>
      <div className="flex justify-center items-center gap-2 sm:gap-4">
        {socialPlatforms.map((platform) => (
          <a
            key={platform.name}
            href={platform.url}
            target="_blank"
            rel="noopener noreferrer"
            title={platform.tooltip}
            className={`flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 ${platform.color} hover:text-white dark:hover:text-dark transition-all duration-300 transform hover:scale-110`}
            aria-label={platform.tooltip}
          >
            {platform.icon}
          </a>
        ))}
        <button
          onClick={handleCopyLink}
          title={copyText}
          className="flex items-center justify-center h-12 px-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-primary dark:hover:bg-primary-light hover:text-white dark:hover:text-dark transition-all duration-300 transform hover:scale-110 text-sm font-medium"
          aria-label={t('copy_link')}
        >
          <CopyLinkIcon />
          <span className="ml-2 hidden sm:inline">{copyText}</span>
        </button>
      </div>
    </div>
  );
};

export default ShareButtons;